<template>
    <div>
        <el-input placeholder="会员UID" v-model="searchUid"></el-input>
        <el-date-picker
               v-model="searchTime"
               type="date"
               placeholder="选择日期"
               format="yyyy - MM - dd"
               value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-input placeholder="订单号" v-model="searchUid"></el-input>
        <button class="sousuo" @click="getRecord"><i class="el-icon-search"></i></button>
          <el-table :data="jiluTable" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="55">
        </el-table-column>
        <el-table-column prop="name"  label="用户信息" width="180">
              <template v-slot="scope">
                <div class="head_url">
                    <img :src="scope.row.user.head_url" alt="">
                </div>
                <div class="info">
                    <div class="uid">UID:<span>{{ scope.row.user.id }}</span></div>
                    <div class="nickname">{{ scope.row.user.nickname }}</div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="奖品信息" width="200">
               <template v-slot="scope">
                    <div class="display_url">
                        <img :src="scope.row.game.cover_url" alt="">
                    </div>
                    <div class="good_info">
                        <div class="uid">名称:{{ scope.row.game.name }}</div>
                        <div class="nickname">单价:{{ format_money(scope.row.game.price) }}</div>
                        <div class="nickname">箱号:{{ scope.row.game.game_num }}</div>
                    </div>
                </template>
        </el-table-column>
        <el-table-column prop="num" label="购买数量">
        </el-table-column>
        <el-table-column prop="address" label="商品总价">
            <template v-slot="scope">
                <el-button size="mini" round type="warning">
                    ￥{{ format_money(scope.row.sum_price) }}
                </el-button>
            </template>
        </el-table-column>
        <el-table-column prop="pay_type" label="支付明细">
            <template v-slot="scope">
                <div class="pay_detail">微信:￥{{ format_money(scope.row.weixin) }}</div>
                <div class="pay_detail">余额:￥{{ format_money(scope.row.money) }}</div>
                <div class="pay_detail">魂晶:￥{{ format_money(scope.row.hunjing) }}</div>
                <div class="pay_detail">赏币:￥{{ format_money(scope.row.score) }}</div>
                <div class="pay_detail">优惠券:￥{{ format_money(scope.row.coupon) }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="类型">
            <template v-slot="scope">
                <el-button type="primary" size="mini" round>{{ scope.row.game_type_name }}</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="支付时间">
            <template>
            {{ Time }}
            </template>
        </el-table-column>
        <el-table-column prop="orderid" label="订单号">
        </el-table-column>
        <el-table-column prop="address" label="操作">
            <template v-slot="scope">
                <el-button size="mini" type="primary" round @click="getDetail(scope.row.uuid)">详情</el-button>
                <el-dialog title="开奖奖品详情" :visible.sync="recordVisible">
                <el-table :data="gridData">
                    <el-table-column property="date" label="赏品信息" width="150">
                        <template v-slot="scope">
                            <div class="display_url">
                                <img :src="scope.row.display_url" alt="">
                                {{ scope.row.name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="name" label="赏品名称" width="200"></el-table-column>
                    <el-table-column property="address" label="回收价值">
                        <template v-slot="scope">
                            <el-button size="mini" type="warning" round>
                                ￥{{ format_money(scope.row.recovery_price) }}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="赏品数量">1</el-table-column>
                </el-table>
                </el-dialog>
            </template>
        </el-table-column>
      </el-table>
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
                :page-sizes="[8, 10, 15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { format_money } from "@/utils/format";
import record from '../../../api/jurisdiction'
    export default {
        data() {
            return {
                jiluTable:[],
                recordVisible:false,
                searchUid:null,
                searchTime:null,
                pagenum: 1,
                pagesize: 8,
                total: 0,
                recordData: [],
                gridData:[]
            }
        },
        created() {
            this.getRecord()
            console.log(this.jiluTable)
    },
        computed: {
            Time() {
            let date = ''
            this.jiluTable.forEach(v => {
                let t = v.createdAt.split('T')
                let t2 = t[1].split('.')
                date = `${t[0]} ${t2[0]}`
            })
            return date
        },
        },
        methods: {
            format_money,
            getDetail(id) {
                this.recordVisible = true;
                record.choushangJiLudetail({
                    order_uuid:id
                }).then((res) => {
                    this.gridData = res.data.data.list
                    console.log('详情',res)
                })
            },
            getRecord() {
                record.choushangJiLu({
                    uid: this.searchUid,
                    date:this.searchTime,
                    page: this.pagenum,
                    page_size:this.pagesize
                }).then((res) => {
                    this.jiluTable = res.data.data.list
                    this.total = res.data.data.sum_count
                    console.log('抽赏记录',res)
                })
            },
                 // 分页
        handleSizeChange(val) {
            this.pagesize = val
            this.getRecord()
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pagenum = val
            this.getRecord()
            console.log(`当前页: ${val}`);
            },
        },
    }
</script>

<style lang="less" scoped>
.el-input{
    width: 250px;
    margin-right:20px;
}
.sousuo {
    margin: 6px;
    width: 50px;
    height: 40px;
    background: #009688;
    border: 0;
    color: white;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
}
.head_url{
    float: left;
    width: 50px;
    height: 50px;
}
.head_url img{
    width: 50px;
    height: 50px;
}
.info{
    float: left;
    font-size: 12px;
    width:80px;
    height: 100%;
    margin-left:10px;
}
.uid{
    color:red;
    font-size: 12px;
}
.el-pagination{
    text-align: center;
    margin-top:10px;
}
.display_url{
    float: left;
    width:60px;
    height: 60px;
}
.display_url img{
    width:60px;
    height: 60px;
    vertical-align: middle;
}
.good_info{
    margin-top:-2px;
    float: left;
    margin-left:5px;
    font-size: 12px;
}
.pay_detail{
    font-size: 12px;
}
</style>